<template>
  <div class="shop-detail">
    <div class="shop-detail-title">店铺基本信息</div>
    <el-form ref="shopDetailForm"
             :model="shopDetailForm"
             label-width="140px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="店铺ID">
            <el-input v-model="shopDetailForm.shop_id"></el-input>
          </el-form-item>
          <el-form-item label="店铺名称">
            <el-input v-model="shopDetailForm.shop_name"></el-input>
          </el-form-item>
          <el-form-item label="分支名称">
            <el-input v-model="shopDetailForm.shopBranch_name"></el-input>
          </el-form-item>
          <el-form-item label="所属行业">
            <el-select v-model="shopDetailForm.industry"
                       placeholder="请选择活动区域">
              <el-option label="行业一"
                         value="shanghai"></el-option>
              <el-option label="行业二"
                         value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证正面照">
            <el-image style="width: 80px; height: 80px"
                      :src="shopDetailForm.idCardFront"
                      fit="cover"></el-image>
          </el-form-item>
          <el-form-item label="身份证反面照">
            <el-image style="width: 80px; height: 80px"
                      :src="shopDetailForm.idCardContrary"
                      fit="cover"></el-image>
          </el-form-item>
          <el-form-item label="店铺地址"
                        class="shopAdress">
            <baidu-map :shopAddress="shopDetailForm.shop_address"></baidu-map>
            <!-- <div class="address"></div>
                        <div class="setAddress">
                          <el-input v-model="shopDetailForm.IdCardFront" placeholder="通过地图选择地址"></el-input>
                          <el-input v-model="shopDetailForm.IdCardFront" placeholder="输入详细地址"></el-input>
                        </div> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="店铺头像">
            <el-image style="width: 80px; height: 80px"
                      :src="shopDetailForm.shop_avater"
                      fit="cover"></el-image>
          </el-form-item>
          <el-form-item label="主要产品图">
            <el-image style="width: 80px; height: 80px"
                      :src="shopDetailForm.main_product"
                      fit="cover"></el-image>
          </el-form-item>
          <el-form-item label="店铺实拍图">
            <el-image style="width: 80px; height: 80px"
                      :src="shopDetailForm.shop_photo"
                      fit="cover"></el-image>
            <el-image style="width: 80px; height: 80px"
                      :src="shopDetailForm.shop_photo"
                      fit="cover"></el-image>
          </el-form-item>
          <el-form-item label="营业证件照">
            <el-image style="width: 80px; height: 80px"
                      :src="shopDetailForm.shop_license"
                      fit="cover"></el-image>
            <el-image style="width: 80px; height: 80px"
                      :src="shopDetailForm.shop_license"
                      fit="cover"></el-image>
            <el-image style="width: 80px; height: 80px"
                      :src="shopDetailForm.shop_license"
                      fit="cover"></el-image>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary"
                   class="shopDetailBtn"
                   @click="onDetailComit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getItem, setItem } from '@/utils/storage'
import BaiduMap from '@/components/baidu-map'
export default {
  name: '',
  data () {
    return {
      shopDetailForm: {},
      shopData: []
    }
  },
  props: {
  },
  components: {
    BaiduMap
  },
  created () {
    this.loadForm()
  },
  mounted () {
  },
  computed: {},
  methods: {
    loadForm () {
      const id = this.$route.params.id
      const key = this.$route.params.key
      this.shopData = getItem(key)
      this.shopDetailForm = this.shopData[id]
    },
    onDetailComit () {
      const id = this.$route.params.id
      const key = this.$route.params.key
      this.shopData.splice(id, 1, this.shopDetailForm)
      setItem(key, this.shopData)
      this.$router.push('/shoplist')
    }
  }
}
</script>
<style scoped lang="less">
.shop-detail {
  .shop-detail-title {
    margin: 15px;
  }
  .el-form-item {
    width: 500px;
  }
  .el-image {
    margin-right: 15px;
  }
  .shopAdress {
    width: 100%;
    height: 400px;
  }
  .setAddress {
    display: flex;
    margin-top: 15px;
    .el-input {
      margin-right: 15px;
    }
  }
  .shopDetailBtn {
    width: 200px;
    height: 50px;
  }
}
</style>